<template>
	<basic-container>
		<avue-crud :option="option" :data="data" :page="page" ref="crud" v-model="form" @row-del="rowDel" @row-update="rowUpdate"
		 @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
		 @size-change="sizeChange" @on-load="onLoad">
					<template slot-scope="scope" slot="menu">
						<el-button type="text" size="small" icon="el-icon-s-tools" @click.stop="handleProperty(scope.row)">属性</el-button>
						<el-button type="text" size="small" icon="el-icon-s-grid" @click.stop="handleDesign(scope.row)">设计</el-button>
					</template>
		</avue-crud>
		<el-dialog title="表单设计" :visible.sync="dialogShow" top="20px" width="98%" append-to-body>
			<avue-form-design style="height: 100vh;" :options="formOptions" @submit="handleSubmit" storage>
			</avue-form-design>
		</el-dialog>
		<el-dialog title="表单属性" :visible.sync="propertyVisible" append-to-body>
			<avue-crud ref="crud" :option="btnOption" :data="btndata" @row-update="addUpdate" @row-del="btnDel">
			</avue-crud>
		</el-dialog>
	</basic-container>
</template>

<script>
	//import '@/util/index.umd.min.js';
	import request from '@/router/axios';
	export default {
		data() {
			return {
				form: {},
				dialogShow: false,
				propertyVisible: false,
				isEdit: false,
				defaultObj: [],
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					//dialogFullscreen: true,
					border: true,
					index: true,
					refreshBtn: false,
					excelBtn: true,
					viewBtn: false,
					menuWidth: 250,
					column: [{
							label: "表单编号",
							prop: "code",
							display: false,
							width: "150px"
						},
						{
							label: "表单名称",
							prop: "name",
							search: true,
							width: "250px",
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "备注",
							prop: "remark"
						}
					]
				},
				data: [],
				formOptions: {

				},
				btnOption:{
					keyId: 'id',
					menuWidth: 150,
					refreshBtn: false,
					columnBtn: false,
					addBtn: false,
					editBtn: false,
					addRowBtn: true,
					cellBtn: true,
					column: [{
						label: '名称',
						prop: 'name',
						cell: true,
						rules: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						}]
					}, {
						label: '编码',
						prop: 'funType',
						cell: true,
						rules: [{
							required: true,
							message: '请输入编码',
							trigger: 'blur'
						}]
					}, {
						label: '备注',
						prop: 'remark',
						cell: true
					}]
				},
				btndata:[]
			};
		},
		computed: {},
		created() {},
		methods: {
			handleProperty(row) {
				this.propertyVisible = true;
			},
			handleDesign(row) {
				this.dialogShow = true;
			},
			handleSubmit(data) {
				this.$message.success("查看控制台")
				console.log(data)
			},
			addUpdate(form, index, done, loading) {
			},
			btnDel(row) {
			},
			beforeOpen(done, type) {
				this.dialogShow = true;
			},
			rowSave(row, loading, done) {
				this.request({
					url: "/api/flwForm/add",
					method: "post",
					data: row
				}).then(
					() => {
						loading();
						this.onLoad(this.page);
						done();
					},
					error => {
						done();
						console.log(error);
					}
				);
			},
			rowUpdate(row, index, loading, done) {
				return this.request({
					url: "/api/flwForm/edit",
					method: "post",
					data: row
				}).then(
					() => {
						loading();
						this.onLoad(this.page);
					},
					error => {
						done();
						console.log(error);
					}
				);
			},
			rowDel(row) {
				this.$confirm("确定数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return this.request({
							url: "/api/flwForm/remove",
							method: "post",
							params: {
								id: row.id
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				this.request({
					url: "/api/flwForm/pages",
					params: {
						key: this.query.name == undefined ? "" : this.query.name,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data;
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
	@import 'http://at.alicdn.com/t/font_1254447_x280zepmf6.css';
</style>
